<!-- 车型添加 -->
<template>
  <div>
    <el-dialog
      :title="!!addData.id ? '编辑车型' : '新增车型'"
      :visible="showDialog"
      @close="closeDialog"
    >
      <el-form
        label-width="120px"
        :model="addData"
        :rules="addRules"
        ref="formRef"
      >
        <el-form-item label="车辆类型" prop="name">
          <el-input
            placeholder="请输入车辆类型"
            v-model="addData.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="应载重量" prop="allowableLoad">
          <el-input
            placeholder="请输入车型载重"
            v-model.number="addData.allowableLoad"
          >
            <span slot="suffix" style="margin-right:10px;color:black">吨</span>
          </el-input>
        </el-form-item>
        <el-form-item label="应载体积" prop="allowableVolume">
          <el-input
            placeholder="请输入车型体积"
            v-model="addData.allowableVolume"
          >
            <span slot="suffix" style="margin-right:10px;color:black"
              >立方</span
            >
          </el-input>
        </el-form-item>
        <el-form-item label="长" prop="measureLong">
          <el-input placeholder="请输入长" v-model="addData.measureLong"
            ><span slot="suffix" style="margin-right:10px;color:black"
              >米</span
            ></el-input
          >
        </el-form-item>
        <el-form-item label="宽" prop="measureWidth">
          <el-input placeholder="请输入宽" v-model.number="addData.measureWidth"
            ><span slot="suffix" style="margin-right:10px;color:black"
              >米</span
            ></el-input
          >
        </el-form-item>
        <el-form-item label="高" prop="measureHigh">
          <el-input
            placeholder="请输入高"
            v-model.number="addData.measureHigh"
            autocomplete="off"
            ><span slot="suffix" style="margin-right:10px;color:black"
              >米</span
            ></el-input
          >
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button @click="add" class="OK">确定</el-button>
        <el-button @click="closeDialog" class="notOK">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { add, detail, update } from '@/api/transit'

export default {
  name: 'CarModelsAdd',
  props: {
    showDialog: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      //表单绑定数据
      addData: {
        name: '',
        allowableLoad: '',
        allowableVolume: '',
        measureLong: '0.0',
        measureWidth: '0.0',
        measureHigh: '0.0'
      },
      //表单校验规则对象
      addRules: {
        name: [{ required: true, message: '车辆类型必填', trigger: 'blur' }],
        allowableLoad: [
          { required: true, message: '应载重量必填', trigger: 'blur' },
          {
            validator: (rule, value, cb) => {
              if (value % 1 === 0 && value >= 1 && value <= 100) {
                cb()
              } else {
                cb(new Error('只可输入1-100之间的整数'))
              }
            },
            trigger: 'blur'
          }
        ],
        allowableVolume: [
          { required: true, message: '应载体积必填', trigger: 'blur' },
          {
            validator: (rule, value, cb) => {
              if (value % 1 === 0 && value >= 1 && value <= 100) {
                cb()
              } else {
                cb(new Error('只可输入1-100之间的整数'))
              }
            },
            trigger: 'blur'
          }
        ],
        measureLong: [
          //类型校验
          {
            validator: (rule, value, cb) => {
              if (+value >= 0 && (+value * 100) % 1 === 0) {
                cb()
              } else {
                cb(new Error('只能输入数字类型，最多保留两位小数，请重新输入'))
              }
            },
            trigger: 'blur'
          },
          //大小校验
          {
            validator: (rule, value, cb) => {
              if (+value <= 100) {
                cb()
              } else {
                cb(new Error('长最多只能输入100，请重新输入'))
              }
            },
            trigger: 'blur'
          }
        ],
        measureWidth: [
          //类型校验
          {
            validator: (rule, value, cb) => {
              if (+value >= 0 && (+value * 100) % 1 === 0) {
                cb()
              } else {
                cb(new Error('只能输入数字类型，最多保留两位小数，请重新输入'))
              }
            },
            trigger: 'blur'
          },
          //大小校验
          {
            validator: (rule, value, cb) => {
              if (+value <= 100) {
                cb()
              } else {
                cb(new Error('长最多只能输入100，请重新输入'))
              }
            },
            trigger: 'blur'
          }
        ],
        measureHigh: [
          //类型校验
          {
            validator: (rule, value, cb) => {
              if (+value >= 0 && (+value * 100) % 1 === 0) {
                cb()
              } else {
                cb(new Error('只能输入数字类型，最多保留两位小数，请重新输入'))
              }
            },
            trigger: 'blur'
          },
          //大小校验
          {
            validator: (rule, value, cb) => {
              if (+value <= 100) {
                cb()
              } else {
                cb(new Error('长最多只能输入100，请重新输入'))
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },

  methods: {
    //弹窗关闭
    closeDialog() {
      this.$emit('closeDialog', false)
      this.$refs.formRef.resetFields()
      this.addData = {
        name: '',
        allowableLoad: '',
        allowableVolume: '',
        measureLong: '0.0',
        measureWidth: '0.0',
        measureHigh: '0.0'
      }
    },
    //添加
    async add() {
      this.$refs.formRef.validate(async ok => {
        if (ok) {
          if (!!this.addData.id) {
            await update(this.addData.id, this.addData),
              this.$message.success('编辑车辆类型成功')
          } else {
            await add(this.addData)
            this.$message.success('添加车辆类型成功')
          }

          // 关闭弹窗
          this.closeDialog()
          // 调用父组件方法刷新列表数据
          this.$emit('update')
        }
      })
    },
    //获取车型详情
    async detail(id) {
      const res = await detail(id)
      console.log(res)
      this.addData = res.data
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.btn {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
  .OK {
    background-color: #e15536;
    color: white;
  }
  .ok:hover {
    background-color: #ffab98;
  }
  .notOK {
    background-color: #fff;
    color: black;
    border: 1px solid #ccc;
  }
  .notOK:hover {
    background-color: #ffeeeb;
    color: #e15536;
    border: 1px solid #e15536;
  }
}
</style>
